<template>
  <div class="home">
    <!-- 页头 -->
    <l-header title="商城"></l-header>

    <!-- 轮播图 -->
    <cube-slide :data="slider" :interval="3000">
      <cube-slide-item v-for="item in slider" :key="item.id">
        <router-link :to="`/detail/${item.id}`">
          <img :src="item.img" class="slider-img">
        </router-link>
      </cube-slide-item>
    </cube-slide>
    <!-- 触发分类选择按钮 -->
    <cube-button @click="showCatg">选择分类</cube-button>

    <!-- 商品列表 -->

    <goods-list :goods="filterGoods" @addCart="onAddCart"></goods-list>

    <!-- 加购物车 动画 抛下的 动画 载体 -->

    <!-- 商品分类列表 侧滑 -->
    <cube-drawer ref="drawer" title="请选择分类" :data="[drawerList]" @select="selectHandler"></cube-drawer>
  </div>
</template>

<script>
// @ is an alias to /src
import GoodsList from "@/components/GoodsList.vue";
import BallAnim from "@/components/BallAnim.vue";
import create from "@/services/create";

const labels = {
  fe: "前端",
  python: "Python",
  java: "Java",
  bigdata: "大数据",
  ai: "人工智能"
};

export default {
  name: "home",
  data() {
    return {
      slider: [],
      goods: [],
      keys: [], //全部分类
      selectedKeys: [] //分类过滤时使用
    };
  },
  components: {
    GoodsList
  },
  async created() {
    //response对象的结构
    /* {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …} */
    //只解构出data
    //data中再向下解构，层级的解构
    //keys所有的分类项
    const {
      data: { data: goods, slider, keys }
    } = await this.$http.get("/api/goods");

    console.log("goods", goods);
    console.log("slider", slider);
    console.log("this", this);

    this.slider = slider;
    this.goods = goods;
    this.keys = keys;

    this.selectedKeys = [...this.keys]; //默认选择全部分类
  },
  computed: {
    // 对异步获取的商品列表数据进行结构处理
    filterGoods() {
      //从已经选择的分类中作为索引
      //从goods把对应的数组拿出来并且拼接，返回传给子页面
      let ret = [];

      this.selectedKeys.forEach(v => {
        ret = ret.concat(this.goods[v]);
      });

      return ret;
    },
    drawerList() {
      // 分类 列表的计算
      return this.keys.map(v => {
        return {
          value: v,
          text: labels[v] //转化为中文标签
        };
      });
    }
  },
  methods: {
    showCatg() {
      //显示分类列表 cube-ui的show()接口
      //cube-ui内置了关闭，在其他任何地方或选择任何项都会自己关
      this.$refs.drawer.show();

      //计算属性 不需要()调用 this.drawerList()
      let cc = this.drawerList;
      console.log("cc", cc);

      //创建Notice实例, 并且 挂在 body下
      const notice = this.$createNotice();
      notice.add({ content: "cube-ui创建的全局提示框消息", duration: 2 });

      //自定义方式
      this.$notice.info({ content: "自定义创建的全局提示框消息", duration: 2 });
    },
    selectHandler(val) {
      //选择处理
      this.selectedKeys = [...val]; //解构 可以用于 多值处理，现在时单值
    },
    onAddCart(el) {
      //子级传过来的点击元素
      // this.ball.el = el;
      // this.ball.show = true;
      console.log("elelelelel", el);

      //创建一个小球 动画实例 // cube-ui 文档API
      // const anim = this.$createBallAnim({
      //   el,
      //   onTransitionend() {
      //     anim.remove(); //动画结束，移除小球组件,这是cube-ui的方法
      //   }
      // });
      // anim.start();

      //手动创建组建实例
      const anim = create(BallAnim, { el });
      anim.start();
      anim.$on("transitionend", () => {
        console.log("anim", anim);

        console.log("anim.remove()", anim.remove());
        anim.remove();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  background: #fff;
}
.cube-slide {
  height: auto;
  .slider-img {
    width: 100%;
  }
}
</style>
